<template>
  <view>
    <view class="top">
      <view class="uni-form-item uni-column">
        <view class="title" style="position: relative;">充值数量
          <view style="position: absolute;top: 0;right: 20upx;" @click="cz_jilu">
            充值记录
          </view>
        </view>
        <view class="yuan">¥</view>
        <input class="uni-input uni-input_top" type="number" placeholder="请输入充值金额" v-model="money" />
      </view>
      <!-- <view class="top_two" >可充值数量<text class="top_right">{{credit}}</text></view> -->
    </view>
    <!-- <view style="font-size: 28upx;margin-left: 50upx;">
			当前充值手续费为{{withdrawcharge}}% 最低充值额度为{{withdrawmoney}}元。
		</view> -->
    <view class="foot">
      <view class="uni-form-item uni-column">
        <view class="get_way">充值方式</view>
      </view>
      <!-- <view class="getit"  @click="changePayType(1)">
				<image src="../../static/wx.png" mode="" class="img"></image>
				<text class="getit_card">微信</text>
				<label class="radio">
					<radio value="" color="#125663" :checked='payType == 1' />
					</radio>
				</label>
			</view> -->
      <!-- <view :style="{ display: boolean_wx }">
				<view style="height: 40upx;line-height: 40upx;margin-left: 20upx;margin-top: 10upx;">微信收款码</view>
				
				<view v-if="wxskm" style="display: inline-block;width: 150upx;height: 150upx;border-radius: 10upx;border: 2upx solid #ccc;margin-left: 20upx;overflow: hidden;margin-top: 20upx;">
					<image :src="wxskm" mode="" style="width: 150upx;height: 150upx;" @click.stop.prevent="previewImage"></image>
				</view>
			</view> -->
      <view class="getit" @click="changePayType(2)">
        <image src="../../static/zfb.png" mode="" class="img"></image>
        <text class="getit_card">支付宝</text>
        <label class="radio">
          <radio value="" color="#125663" :checked='payType == 2' />
          </radio>
        </label>
      </view>
      <view :style="{ display: boolean_zfb }">
        <view style="height: 40upx;line-height: 40upx;margin-left: 20upx;margin-top: 10upx;">支付宝收款码</view>

        <view v-if="zfbskm"
          style="display: inline-block;width: 150upx;height: 150upx;border-radius: 10upx;border: 2upx solid #ccc;margin-left: 20upx;overflow: hidden;margin-top: 20upx;">
          <image :src="zfbskm" mode="" style="width: 150upx;height: 150upx;" @click.stop.prevent="previewImage1">
          </image>
        </view>
      </view>
      <view class="getit" @click="changePayType(3)">
        <image src="../../static/yue_1.png" mode="" class="img"></image>
        <text class="getit_card">银行卡</text>
        <label class="radio">
          <radio value="" color="#125663" :checked='payType == 3' />
          </radio>
        </label>
      </view>
      <view class="show" :style="{display:boolean}">
        <view class="same">
          <view class="name">收款姓名</view>
          <input class="uni-input uni-input_cell" type="text" disabled placeholder="请输入姓名" v-model="bank.bank_user" />
        </view>
        <view class="same">
          <view class="name">收款银行名称</view>
          <input class="uni-input uni-input_cell" type="text" disabled placeholder="请输入银行" v-model="bank.bank" />
        </view>
        <view class="same">
          <view class="name">收款开户支行</view>
          <input class="uni-input uni-input_cell" type="text" disabled placeholder="请输入开户支行"
            v-model="bank.bank_branch" />
        </view>
        <view class="same">
          <view class="name">收款银行卡号</view>
          <input class="uni-input uni-input_cell" type="number" disabled placeholder="请输入银行卡号" v-model="bank.bank_id" />
        </view>
        <!-- <view class="same">
					<view class="name">确认卡号</view>
					<input class="uni-input uni-input_cell" type="number" placeholder="请确认卡号" v-model="bankcard1" />
				</view> -->

        <!-- <view class="list webkit same">
					<view class="label">所在地区</view>
					<button class="" type="" @click="showMulLinkageThreePicker" style="background: #fff;outline:none;line-height: 55upx;">{{accountarea}}</button>
				</view> -->

      </view>
      <view style="background: #F5F5F5;margin: 30upx 0;padding-top: 30upx;">
        <view style="background: #fff;">
          <view style="color: #777777;margin-left: 30upx;height: 50upx;line-height: 50upx;">
            交易凭证
          </view>
          <view
            style="display: inline-block;width: 90%;height: 350upx;border-radius: 10upx;border: 2upx solid #ccc;margin-left: 5%;overflow: hidden;margin-top: 20upx;text-align: center;font-size: 45upx;line-height: 350upx;"
            @click.stop.prevent="chooseImage" v-if="!res.wechat">
            点击上传交易凭证
          </view>
          <view v-if="imagess[0]"
            style="display: inline-block;width: 90%;height: 350upx;border-radius: 10upx;border: 2upx solid #ccc;margin-left: 5%;overflow: hidden;margin-top: 20upx;">
            <image :src="imagess[0]" @click.stop.prevent="chooseImage" mode="" style="width: 100%;height: 100%;">
            </image>
          </view>
        </view>
      </view>
      <button class="next" style="background-color: #125663;" @click="ljcz">立即充值</button>
      <view style="padding: 30rpx;">
        <view style="margin-bottom: 10rpx;">请直接转账到以下银行账户</view>
        <view style="margin-bottom: 10rpx;">开户名称:<text style="color: red;"
            @click="copyBankCard(bank.bank_user)">{{bank.bank_user}}</text></view>
        <view style="margin-bottom: 10rpx;">开户账号:<text style="color: red;"
            @click="copyBankCard(bank.bank_id)">{{bank.bank_id}}</text></view>
        <view style="margin-bottom: 10rpx;">开户行名:<text style="color: red;"
            @click="copyBankCard(bank.bank)">{{bank.bank}}</text></view>
        <view style="margin-bottom: 10rpx;">开户地址:<text style="color: red;"
            @click="copyBankCard(bank.bank_branch)">{{bank.bank_branch}}</text></view>
        <view style="margin-bottom: 10rpx;">可点击复制银行账户信息</view>
      </view>
    </view>



  </view>
</template>

<script>
  export default {
    data() {
      return {
        bank: {},
        res: {},
        openid: '',
        money: '',
        active: "active",
        checked: 'checked',
        boolean: 'none',
        boolean_wx: 'none',
        boolean_zfb: 'none',
        bankout: 'none',
        arrs: [],
        realname: '',
        bankname: '',
        bankbranch: '',
        bankbranch2: '',
        bankbranch3: '',
        bankcard: '',
        bankcard1: '',
        credit: '',
        multiple: '',
        withdrawcharge: '',
        withdrawmoney: '',
        // 地址
        accountarea: '-请选择地区-',
        cityPickerValueDefault: [0, 0, 0],
        pickerValueDefault: [0],
        pickerValueArray: [],
        // mulLinkageTwoPicker: cityData,
        // province:province,
        // city:city,
        // area:area,
        // asd:asd,
        themeColor: '#007AFF',
        pickerText: '',
        mode: '',
        deepLength: 1,
        datavalue: '',
        payType: '', // 支付类型
        imagess: [], // 数组类型图片 wx
        imgurl: '', // 字符串类型图片 wx
        imagesss: [], // 数组类型图片 zfb
        imgurls: '', // 字符串类型图片 zfb
        wxskm: '',
        zfbskm: '',
        type: '',
      };
    },
    onLoad: function() {
      uni.showLoading()
      uni.getStorage({
        key: 'openid',
        success: (res) => {
          this.openid = res.data
          this.setAjax()
        },
        fail: () => {
          uni.navigateTo({
            url: '../login/login'
          });
        }
      });
    },
    methods: {
      setAjax() {
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=order.luckdraw.pay_info&app=1',
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            this.res = res.data
            // console.log(this.res)
            this.bank = res.data.bank
            this.wxskm = res.data.wechat_collection
            this.zfbskm = res.data.alipay_collection
            uni.hideLoading()
          },
          fail: () => {},
          complete: () => {}
        });
      },
      chooseImage() {
        var _this = this
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: function(res) {
            let file = res.tempFilePaths
            var images = []
            var img = ''
            for (var i = 0; i < res.tempFilePaths.length; i++) {
              uni.uploadFile({
                url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
                //仅为示例，非真实的接口地址
                filePath: file[i],
                name: 'file',
                formData: {
                  'user': 'test'
                },
                success: (res) => {
                  _this.res.wechat = true
                  // console.log(res)
                  images.push(JSON.parse(res.data).url)
                  _this.imagess = images
                  // _this.avatar = _this.imagess[0]

                  img = img + JSON.parse(res.data).url + ';'
                  _this.imgurl = img
                }
              });
            }
          }
        });
      },
      select_img() {
        var _this = this
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: function(res) {
            let file = res.tempFilePaths
            var images = []
            var img = ''
            for (var i = 0; i < res.tempFilePaths.length; i++) {
              uni.uploadFile({
                url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
                //仅为示例，非真实的接口地址
                filePath: file[i],
                name: 'file',
                formData: {
                  'user': 'test'
                },
                success: (res) => {
                  _this.res.alipay = true
                  // console.log(res)
                  images.push(JSON.parse(res.data).url)
                  _this.imagesss = images
                  // _this.avatar = _this.imagess[0]

                  img = img + JSON.parse(res.data).url + ';'
                  _this.imgurls = img
                }
              });
            }
          }
        });
      },
      previewImage() {
        console.log(this.wxskm) // http://192.168.100.251:8970/6_1597822634094.png
        var images = [];
        images.push(this.wxskm);
        console.log(images) // ["http://192.168.100.251:8970/6_1597822634094.png"]
        uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://192.168.100.251:8970/6_1597822634094.png"]
          current: 0,
          urls: images,
          longPressActions: { //长按保存图片到相册
            itemList: ['保存图片'],
            success: (data) => {
              console.log(data);
              uni.saveImageToPhotosAlbum({ //保存图片到相册
                filePath: payUrl,
                success: function() {
                  uni.showToast({
                    icon: 'success',
                    title: '保存成功'
                  })
                },
                fail: (err) => {
                  uni.showToast({
                    icon: 'none',
                    title: '保存失败，请重新尝试'
                  })
                }
              });
            },
            fail: (err) => {
              console.log(err.errMsg);
            }
          }
        });
      },
      previewImage1() {
        console.log(this.zfbskm) // http://192.168.100.251:8970/6_1597822634094.png
        var images = [];
        images.push(this.zfbskm);
        console.log(images) // ["http://192.168.100.251:8970/6_1597822634094.png"]
        uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://192.168.100.251:8970/6_1597822634094.png"]
          current: 0,
          urls: images,
          longPressActions: { //长按保存图片到相册
            itemList: ['保存图片'],
            success: (data) => {
              console.log(data);
              uni.saveImageToPhotosAlbum({ //保存图片到相册
                filePath: payUrl,
                success: function() {
                  uni.showToast({
                    icon: 'success',
                    title: '保存成功'
                  })
                },
                fail: (err) => {
                  uni.showToast({
                    icon: 'none',
                    title: '保存失败，请重新尝试'
                  })
                }
              });
            },
            fail: (err) => {
              console.log(err.errMsg);
            }
          }
        });
      },
      //选择支付方式
      changePayType(type) {
        // console.log(type)
        this.payType = type;
        if (type == 1) { // 微信
          this.boolean_wx = 'block'
          this.boolean_zfb = 'none'
          this.boolean = 'none'
          this.type = 'wechat'
        }
        if (type == 2) { // 支付宝
          this.boolean_zfb = 'block'
          this.boolean_wx = 'none'
          this.boolean = 'none'
          this.type = 'alipay'
        }
        if (type == 3) {
          this.boolean = 'block'
          this.boolean_wx = 'none'
          this.boolean_zfb = 'none'
          this.type = 'bank'
        }
      },
      onCancel(e) {},
      showMulLinkageThreePicker() {
        this.$refs.mpvueCityPicker.show()
      },
      onConfirm(e) {
        this.accountarea = e.label
        console.log(this.accountarea)
        // var pro = e.value[0]
        // var city = e.value[1]
        // var area = e.cityCode
        // this.submit.datavalue = this.province[pro].value + '0000 ' + this.city[pro][city].value + '00 ' +area
        // var a = e.label.split("-")
        // a = a[0] + ' ' + a[1] + ' ' + a[2]
        // this.submit.areas = a
      },
      // onBackPress() {
      //   if (this.$refs.mpvuePicker.showPicker) {
      // 	this.$refs.mpvuePicker.pickerCancel();
      // 	return true;
      //   }
      //   if (this.$refs.mpvueCityPicker.showPicker) {
      // 	this.$refs.mpvueCityPicker.pickerCancel();
      // 	return true;
      //   }
      // },
      // onUnload() {
      // 	if (this.$refs.mpvuePicker.showPicker) {
      // 		this.$refs.mpvuePicker.pickerCancel()
      // 	}
      // 	if (this.$refs.mpvueCityPicker.showPicker) {
      // 		this.$refs.mpvueCityPicker.pickerCancel()
      // 	}
      // },
      check() {
        this.boolean = this.boolean == 'block' ? 'none' : 'block'
      },
      bank_out() {
        this.bankout = 'block'
      },
      bank_miss(index) {
        this.bankname = this.arrs[index]
        this.bankout = 'none'
      },
      cz_jilu() {
        uni.navigateTo({
          url: '/pages/czjl/czjl'
        })
      },
      jumpto() {
        if (this.payType == 1) {
          this.wx_tx()
        }
        if (this.payType == 2) {
          this.zfb_tx()
        }
        if (this.payType == 3) {
          this.jump()
        }
      },
      ljcz() {
        let that = this
        var data = {
          'openid': this.openid,
          'money': this.money,
          'type': this.type,
          'pic_url': this.imagess[0]
        }
        console.log(data)
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=order.luckdraw.recharge&app=1',
          method: 'POST',
          data: data,
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            console.log(res)
            uni.showModal({
              title: '提示',
              content: res.data.message,
              showCancel: false,
              success() {
                if (res.data.error == 0) {
                  that.cz_jilu()
                }
              }
            })

          },
          fail: () => {},
          complete: () => {}
        })
      }
    }
  }
</script>

<style lang="scss">
  .pay-type-list {
    margin-top: 20upx;
    background-color: #fff;
    padding-left: 60upx;

    .type-item {
      height: 120upx;
      padding: 20upx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 60upx;
      font-size: 30upx;
      position: relative;
    }

    .icon {
      width: 100upx;
      font-size: 52upx;
    }

    .icon-erjiye-yucunkuan {
      color: #fe8e2e;
    }

    .icon-weixinzhifu {
      color: #36cb59;
    }

    .icon-alipay {
      color: #01aaef;
    }

    .tit {
      font-size: $font-lg;
      color: $font-color-dark;
      margin-bottom: 4upx;
    }

    .con {
      flex: 1;
      display: flex;
      flex-direction: column;
      font-size: $font-sm;
      color: $font-color-light;
    }
  }


  button::after {
    border: none;
  }

  .top {
    margin-top: 30upx;
    background-color: #fff;
    padding: 0 20upx;
  }

  .uni-form-item {
    position: relative;
  }

  .uni-input_top {
    margin-left: 50upx;
    height: 100upx;
    line-height: 100upx;
    font-size: 40upx;
    // border-bottom: 1upx solid #eee;
  }

  .yuan {
    position: absolute;
    top: 100upx;
    font-size: 44upx;
    font-weight: 555;
    left: 20upx;
  }

  .top_two {
    height: 80upx;
    line-height: 80upx;
    margin-left: 20upx;
    color: #555;
  }

  .top_right {
    margin-left: 50upx;
  }

  .foot {
    background-color: #FFFFFF;
    margin-top: 30upx;
  }

  .get_way {
    margin-left: 30upx;
    border-bottom: 2upx solid #eee;
  }

  .img {
    width: 50upx;
    height: 50upx;
    margin-left: 30upx;
    margin-top: 30upx;
  }

  .getit {
    position: relative;
    height: 100upx;
    border-bottom: 2upx solid #eee;
  }

  .getit_card {
    position: absolute;
    top: 30upx;
    left: 100upx;
  }

  .radio {
    position: absolute;
    top: 30upx;
    right: 25upx;
  }

  .show {
    background-color: #fff;
  }

  .same {
    height: 80upx;
    display: flex;
    margin: 20upx;
    padding-bottom: 20upx;
    border-bottom: 1upx solid #eee;
  }

  .name {
    flex: 1.5;
    padding-top: 16upx;
  }

  .uni-input_cell {
    flex: 3;
  }

  .bank {
    flex: 3;
    position: relative;
  }

  .bank_online {
    position: absolute;
    left: 10upx;
    top: 16upx;
  }

  .out_miss_father {
    position: absolute;
    top: 58upx;
    left: 10upx;
    z-index: 99999;
    width: 400upx;
    border: 1upx solid #ccc;
    background-color: #fff;
  }

  .next {
    margin: 20upx;
    border-radius: 15upx;
    background-color: #FF5555;
    color: #fff;
  }

  .list {
    height: 60upx;
    line-height: 60upx;
  }
</style>
